<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!--[if IE ]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
	<meta name="robots" content="index, follow">
	<title>Schuldendossier</title>
	<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/print.css" media="print">
	<script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.ui.datepicker-nl.js"></script>
	<script src="js/jquery.validate.min.js"></script>
	<script src="js/jquery.address-1.4.min.js"></script>
	<script src="js/jquery.tinyscrollbar.js"></script>
	<script src="js/levi-2.js"></script>
</head>
<body>
	<div class="wrapper">
		<header>
		    <nav>
				<p>Informatie over <strong>schuldendossier.nl</strong> voor:</p>
				<ul>
					<li><a href="/info/clienten.html">Cliënten</a></li><!-- link to info page -->
					<li><a href="/info/maatschappelijkwerk.html">Hulpverleners</a></li><!-- link to info page -->
					<li><a href="/info/gemeenten.html">Gemeenten</a></li><!-- link to info page -->
					<li><a href="#">Schuldeisers</a></li><!-- link to info page -->
				</ul>
			</nav>
        <div class="login{% if self.user %} session-active{% endif %}">
            <span class="panel-session">
                U bent ingelogd als: <span id="user-id">{{self.user.first_name}} {{ self.user.last_name}}</span>
                <a class="logout" href="/logout" target="_top">Log uit</a>
            </span>
            <span class="panel-login">
                <a class="login" href="/login">Log in</a>
            </span>

        </div>
		</header>

		<section class="content">
        {% if self.user %}
        <ul class="tabs" id="tabs">
            {% for tab in self.user.tabs %}
            <li><a href="{{tab.0}}">{{tab.1}}</a></li>
            {% endfor %}
        </ul>
        {% else %}
        <ul class="tabs" id="tabs">
            <li><a href="/info/clienten.html">Info</a></li>
            <li><a href="/info/werkwijze.html">Werkwijze</a></li>
            <li><a href="/client/register">Aanmelden</a></li>
        </ul>
        {% endif %}
			<div class="content-wrapper">
				<div class="content-inner">
                    <p id="appstatus" class="appstatus">{{message|default:"&nbsp;"}}</p>
                    <div id="appbuttons" class="appbuttons"></div>
                    <style>
                        #front-page {
                            overflow: auto;
                            margin: 0 6%;
                            display: none;
                        }
                        #front-page.active {
                            display: block;
                        }
                        .site-title {
                            font-size: 4.8em;
                            font-weight: lighter;
                            padding: 0;
                            margin: 0;
                            color: #94D2E3;
                            text-transform: uppercase;
                        }
                        .intro-flow {
                            width: 100%;
                            max-width: 813px;
                        }
                        .intro-text {
                            width: 48%;
                            -webkit-box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.4);
                            -moz-box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.4);
                            box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.4);
                            background-color: #E8F9F9;
                            border-radius: .5em;
                            float: left;
                            margin: 0;
                            padding: 1em;
                        }
                        .intro-text.first {
                            float: left;
                        }
                        .intro-text.second {
                            float: right;
                        }
                        .intro-text h2,
                        .intro-text p {
                            margin: 0;
                            padding: 0;
                        }
                        .intro-cta,
                        .intro-cta * {
                            color: #942937;
                        }
                        .intro-cta {
                            float: left;
                            clear: both;
                        }
                    </style>
					<div id="content">
                        <div id="front-page">
                            <h1 class="site-title">SCHULDENDOSSIER.NL</h1>
                            <img src="images/voorpagina.png" class="intro-flow">
                            <div class="intro-text first">
                                <h2>Maak eenvoudig een dossier aan</h2>
                                <p>Shulden oplossen is hard werken. De eerste stap die mensen moeten maken is het maken van een overzicht van alles schulden. SCHULDENDOSSIER.NL helpt hulpverleners en mensen met schulden bij deze lastige stap.</p>
                            </div>
                            <div class="intro-text second">
                                <h2>Sneller resultaat</h2>
                                <p>Clienten kunnen zich op de site aanmelden en een overzicht maken van hun schuldeisers en hun openstaande schulden. Hulpverleners krijgen daardoor direct inzicht en kunnen zo sneller aansturen, adviseren en doorverwijzen.</p>
                            </div>
                            <p class="intro-cta">
                                <strong class="cta">Log in of meld je aan!</strong><br>
                                Voor meer informatie: stuur een e-mail naar <a href="mailto:info@schuldendossier.nl">info@schuldendossier.nl</a>
                            </p>
                        </div>
                        <script>
                            if (window.location.hash === "") {
                                $("#front-page").addClass("active");
                            }
                        </script>
                    </div>
				</div>
			</div>
		</section>
	</div>
	<div id="popup" class="popup">
      <div class="popup-wrapper">
		<a href="#" class="popup-close">[close]</a>
		<div class="popup-content">My content</div>
      </div>
	  <div class="overlay"></div>
	</div>
</body>
</html>
